<template>
  <div id="stuInfoCharts">
    <div class="top">
      <globle-linear-border class="top-chart"><el-card id="workRate"></el-card></globle-linear-border>
      <globle-linear-border class="top-chart"><el-card id="workType"></el-card></globle-linear-border>
      <globle-linear-border class="top-chart"><el-card id="sexScale"></el-card></globle-linear-border>
    </div>
    <globle-linear-border class="bottom"><el-card id="workCity"></el-card></globle-linear-border>
  </div>
</template>

<script setup lang="ts">
import { onMounted, onBeforeUnmount, ref, watch, reactive } from 'vue';
import echarts from '../../../echarts';
import { useUtils } from '../../../utils';
import { initBar } from './chartsInit/workCity';
import { initWorkRate } from './chartsInit/workRate';
import { initSexScale } from './chartsInit/sexScale';
import { initWorkType } from './chartsInit/workType';
import { useAPI } from '../../../request/api';
import { useUserStore } from '../../../store/user';
import { APIData, IStuWorkChat, IThemeColor } from '../../../type';
import { useThemeStore } from '../../../store/theme';
const utils = useUtils();
const store = useUserStore();
const themeStore = useThemeStore();
const api = useAPI();

let chartData = {} as IStuWorkChat;

interface ISexScale {
  name: string;
  value: number;
}
let sexScaleData = [] as ISexScale[];

const isCloseMenu = ref<boolean>(themeStore.isColseMenu);
const themeColor = ref<IThemeColor>(themeStore.currentThemeColor);
themeStore.$subscribe((args, states) => {
  if (themeColor.value.font != states.currentThemeColor.font) {
    themeColor.value = states.currentThemeColor;
    disposeAllCharts(); //销毁之前的实例
    initAllCharts(); //重新创建
  }

  if (isCloseMenu.value != states.isColseMenu) {
    isCloseMenu.value = states.isColseMenu;

    setTimeout(() => {
      disposeAllCharts(); //销毁之前的实例
      initAllCharts(); //重新创建
    }, 300);
  }
});

onMounted(async () => {
  await getStuWorkChartData();

  chartData.workCityList.push('未就业');
  chartData.workCityStuNumList.push(chartData.unWorkStuNum);
  chartData.workTypeList.push('未就业');
  chartData.workTypeStuNumList.push(chartData.unWorkStuNum);

  initAllCharts();
});

const initAllCharts = () => {
  initBar(echarts, document.querySelector('#workCity') as HTMLElement, chartData.workCityStuNumList, chartData.workCityList, themeColor.value);
  initWorkRate(echarts, document.querySelector('#workRate') as HTMLElement, chartData.workStuNum, chartData.totalStuCount, themeColor.value);
  initSexScale(echarts, document.querySelector('#sexScale') as HTMLElement, sexScaleData, themeColor.value);
  initWorkType(echarts, document.querySelector('#workType') as HTMLElement, chartData.workTypeStuNumList, chartData.workTypeList, themeColor.value);
};

const disposeAllCharts = () => {
  echarts.dispose(document.querySelector('#workCity') as HTMLElement);
  echarts.dispose(document.querySelector('#sexScale') as HTMLElement);
  echarts.dispose(document.querySelector('#workRate') as HTMLElement);
  echarts.dispose(document.querySelector('#workType') as HTMLElement);
};

onBeforeUnmount(() => {
  disposeAllCharts();
});

const getStuWorkChartData = async () => {
  const res: APIData = await api.getChartData({ stage: store.currentStage, department: store.currentDepartment }, store.role, 'stuWork');
  chartData = res.data;
  // console.log(chartData);

  sexScaleData = [
    { name: '男', value: chartData.boyWorkCount },
    { name: '女', value: chartData.girlWorkCount },
  ];
};
</script>

<style lang="scss" scoped>
#stuInfoCharts {
  height: 100%;
  .bottom {
    height: 48%;
    margin: 16px;
    margin-bottom: 0;
    #workCity {
      height: 100%;
      width: 100%;
    }
  }

  .top {
    height: 48%;
    display: flex;
    justify-content: space-between;
    //  {
    //   margin: 16px;
    //   margin-top: 0;
    //   width: 32%;
    // }
    &-chart {
      #sexScale,
      #workType,
      #workRate {
        height: 100%;
        width: 100%;
      }
      margin: 16px;
      margin-top: 0;
      width: 32%;
    }
  }
}
</style>
